<template>
  <div class="filtrateBox">
    <!--其它筛选插槽-->
    <slot></slot>
    <!--城市地址-->
    <div class="filtrate_city" @click="onCity">
      <span>城市:{{ store.state.area.city }}</span>
      <svg class="fuhaoxiala_icon" aria-hidden="true">
        <use xlink:href="#icon-fuhaoxiala"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";

export default {
  name: "Filtrate",
  setup() {
    const store = useStore();
    //修改弹出框状态
    const onCity = () => {
      store.commit("area/handleIsArea");
    };
    return {
      onCity,
      store,
    };
  },
};
</script>

<style scoped lang="less">
.filtrateBox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
}
.filtrate_kind,
.filtrate_city,
.filtrate_variety {
  span {
    font-size: 0.9rem;
    color: #576b95;
  }
}
.fuhaoxiala_icon {
  width: 1em;
  height: 1em;
  color: #1989fa;
  vertical-align: -0.2em;
  fill: currentColor;
  overflow: hidden;
}
</style>
